@mixin modal-main() {
  overflow: hidden;

  min-width: $modal-default-width;
  margin-top: 140px;

  border-radius: $modal-default-radius;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
}

@mixin modal-flex() {
  display: flex;
  flex-direction: column;

  flex: 1;
  align-items: center;
}

.ReactModalPortal {
  width: auto;
  height: auto;
  .ReactModal__Overlay {
    background-color: transparent !important;
  }
  &:last-child {
    .ReactModal__Overlay {
      background-color: $modal-backdrop-color !important;
    }
  }
}

.ReactModal__Overlay {
  position: fixed;
  z-index: 100;

  opacity: 0;

  @include modal-flex();
  justify-content: flex-start;

  &--after-open {
    opacity: 1;
  }
  &--before-close {
    opacity: 0;
  }
}

.ReactModal__Content {
  outline: none;
}

.modal-new {
  position: relative;

  color: $modal-text-color;
  outline: none;
  background-color: $modal-default-background;

  @include modal-main();

  &__header {
    position: relative;
    //z-index: 5;

    box-sizing: border-box;
    height: $modal-header-height;
    padding: 18px 14px 18px 18px;

    user-select: none;

    background-color: white;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
    &__title {
      font-size: 18px;
      font-weight: 400;
      line-height: 24px;

      display: inline-block;

      margin: 0;

      vertical-align: middle;

      color: $greyish-brown;
    }
    &__icon {
      //margin-top: -2px;
      //color: $dove-gray;
      //font-size: 20px;
      line-height: 24px;

      margin-right: 16px;
      margin-left: 2px;

      color: rgba(black, .4);
    }
    &__close,
    &__back {
      cursor: pointer;
    }

    .button {
      margin-top: -6px;
    }

    .pull-right {
      margin-left: 16px;
    }
  }

  &__body {
    //margin-bottom: 12px;
    padding-bottom: 6px;

    background-color: white;
    //box-shadow: 0 2px 1px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(0,0,0,.06);
    &__list {
      margin: 0;
      padding: 0;

      list-style: none;
      li {
        font-size: 15px;
        line-height: 26px;

        padding: 10px 0;

        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07);
        &:last-child {
          box-shadow: none;
        }
      }
    }

    .login__form__input {
      margin-bottom: 16px;
      label {
        color: rgba(0, 0, 0, .54) !important;
      }
    }
  }

  &__search {
    position: relative;
    .material-icons {
      font-size: 18px;
      line-height: 24px;

      position: absolute;
      top: 6px;
      left: 8px;

      pointer-events: none;

      color: rgba(black, .25);
    }
    .input {
      font-size: 14px;

      margin: 0;
      padding-left: 30px;

      color: rgba(black, .2);
      border: 1px solid $cloudy-blue;
      background-color: white;
      line-height: 32px;
      width: 100%;
      box-sizing: border-box;
      border-radius: 2px;
      &:focus {
        color: $greyish-brown;
      }
    }
  }

  &__footer {
    padding: 16px;

    background-color: white;

    @include clearfix();
  }

  &--profile {
    .modal-new__body {
      padding: 16px;
      //padding-bottom: 6px;
    }

    .name,
    .nick {
      font-size: 18px;

      margin-bottom: 6px;

      color: $modal-text-color;
      .login__form__input {
        margin-bottom: 0;
      }
    }
    .about {
      label {
        font-size: 12px;

        display: inline-block;

        margin-bottom: 6px;

        color: rgba(0, 0, 0, .5);
      }
    }

    .col-xs {
      padding: 0 16px 16px;
    }
    footer {
      padding: 0 16px 16px;
    }
  }
  &--create-group {
    .count {
      font-size: 12px;
      line-height: 14px;
      //margin-top: 12px;

      display: block;

      padding: 8px 16px;

      text-transform: uppercase;

      color: rgba($dorado, .5);
      background-color: white;
    }
    .group-members {
      .modal-new__body {
        padding: 0;
      }
    }

    .contacts__list {
      overflow-x: hidden;
      overflow-y: auto;

      max-height: 314px;
      .contacts__list__item:hover {
        background-color: white;
      }
      //box-shadow: inset 0 -1px 0 rgba(0,0,0,.07);

      //border-bottom: 1px solid rgba(0,0,0,.07);
    }

    footer {
      text-align: right;
    }

    .modal-new__header {
      &__icon {
        margin: 0 8px 0 0;
      }
    }
    .modal-new__body {
      padding: 0 16px;
    }
    .login__form__input {
      margin-bottom: 16px;
      label {
        color: rgba(0, 0, 0, .54) !important;
      }
    }
  }
  &--add-contact {
    .modal-new__header {
      &__icon {
        margin: 0 8px 0 0;
      }
    }
    .modal-new__body {
      padding: 18px;
    }
    .modal-new__footer {
      padding: 0 18px 18px;
    }
  }
  &--update {
    .modal-new__body {
      padding: 1px 24px;
      h1,
      h3 {
        font-weight: 300;
      }
    }
  }
  &--invite {
    .modal-new__body {
      padding: 18px;
      .link {
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;

        display: inline-block;

        margin-top: 18px;

        vertical-align: middle;
        text-transform: uppercase;
        .material-icons {
          font-size: 22px;

          margin-right: 16px;
          margin-left: 5px;

          vertical-align: bottom;
        }
      }
    }
  }
  &--invite-by-link {
    .modal-new__header {
      .icon {
        cursor: pointer;
      }
    }
    .modal-new__body {
      font-size: 15px;

      padding: 18px;

      color: $greyish-brown;
      .textarea {
        height: 58px;
        margin-top: 18px;
      }
    }
    .modal-new__footer {
      padding: 0 18px;

      @include clearfix();
      .button {
        width: 176px;
        margin-bottom: 18px;
      }
    }
  }
  &--preferences {
    .modal-new__body {
      padding: 0;

      background-color: $pale-grey;
      .preferences {
        display: flex;
        flex-direction: row;

        height: 440px;

        flex: 1;
        &__tabs {
          display: block;

          width: 190px;
          height: 100%;
          &__tab {
            font-size: 15px;
            line-height: 20px;

            display: block;

            padding: 10px 16px;

            cursor: pointer;

            color: $greyish-brown;
            &--active {
              color: white;
              background-color: $dark-sky-blue2;
            }
          }
        }
        &__body {
          display: flex;
          overflow-x: hidden;
          overflow-y: auto;

          padding: 0 0 0 80px;

          background-color: white;

          flex: 1;
        }
        &__list {
          width: 100%;
          &__item {
            display: none;
            ul {
              margin: 0;
              padding: 0;

              list-style: none;
              li {
                font-size: 15px;
                line-height: 24px;

                position: relative;

                padding: 32px 32px 32px 0;

                border-bottom: 1px solid rgba(black, .12);
                .icon {
                  line-height: 24px;

                  position: absolute;
                  top: 32px;
                  left: -52px;

                  color: rgba(black, .4);
                }
                .hint {
                  font-size: 13px;
                  line-height: 18px;

                  margin: 0;
                  padding-left: 32px;

                  color: rgba(black, .3);
                }
                &:last-child {
                  border-bottom: none;
                }
              }
            }
            h4 {
              font-size: 13px;
              font-weight: 500;
              line-height: 24px;

              display: inline-block;

              margin-top: 0;

              text-transform: uppercase;

              color: rgba(black, .4);
            }
            .radio {
              margin-bottom: 8px;
              b {
                font-weight: 500;
              }
              &:last-child {
                margin-bottom: 0;
              }
            }
            .checkbox {
              margin-bottom: 8px;
            }
            .session-list {
              margin: 0;
              padding: 0;

              list-style: none;
              a {
                cursor: pointer;
              }
              &__session {
                line-height: 24px;

                position: relative;

                margin-right: -32px;
                margin-bottom: 8px;
                padding: 0 32px 8px 0;
                &__terminate {
                  position: absolute;
                  top: 14px;
                  right: 32px;
                }
                .title {
                  small {
                    font-style: italic;

                    margin-left: 6px;
                  }
                }
                small {
                  font-size: 13px;

                  color: rgba(0, 0, 0, .3);
                  b {
                    font-weight: 400;

                    color: rgba(0, 0, 0, .5);
                  }
                }
              }
            }
            &--active {
              display: block;
            }
          }
        }
      }
    }
  }
  &--edit-group {
    .modal-new__body {
      padding: 16px;
      .col-xs {
        padding: 0 16px 16px;
      }
    }
    .about {
      label {
        font-size: 12px;

        display: inline-block;

        margin-bottom: 6px;

        color: rgba(0, 0, 0, .5);
      }
    }
  }
  &--profile-picture {
    max-width: 90%;
    max-height: 90%;
    margin-top: 64px;
    .modal-new__body {
      line-height: 1px;

      overflow: hidden;

      padding: 0;
    }
  }
  &--contacts {
    .modal-new__body {
      padding: 18px;
    }
    .contacts {
      &__list {
        &__item {
          &:hover {
            font-weight: 500;

            cursor: pointer;

            color: white;
            background-color: $dark-sky-blue;
          }
          &--empty {
            font-weight: 400 !important;
            line-height: 32px !important;

            cursor: default !important;

            color: $dove-gray !important;
            background-color: white !important;
          }
        }
      }
    }
  }
  &--attachments {
    .modal-new__header {
      height: auto;
      padding: 16px;

      box-shadow: none;
      &__title {
        font-size: 20px;
        font-weight: 500;
        line-height: 36px;

        color: $modal-text-color;
      }
      .button {
        margin-top: 0;
      }
    }
    .modal-new__body {
      padding: 0 16px 16px;
    }
    .modal-new__footer {
      .button {
        margin-left: 8px;
      }
      .pagination {
        margin-top: 8px;
      }
    }

    .attachment {
      // display: none;
      // &--active {
      //   display: flex;
      // }

      &__preview {
        min-height: 180px;
        max-height: 240px;

        text-align: center;
        img {
          max-width: 100%;
          max-height: 240px;

          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
        }
      }
      &__meta {
        margin-bottom: 8px;
        &__title {
          font-size: 14px;
          line-height: 18px;

          color: $greyish;
        }
        &__content {
          line-height: 32px;
        }
      }
      &__extra {
        &__title {
          font-size: 14px;
          line-height: 18px;

          color: $greyish;
        }
        &__switcher {
          line-height: 32px;
          .switch {
            margin-top: 4px;
          }
          .switch-label {
            cursor: pointer;
          }
        }
      }
    }
    .pagination {
      display: inline-block;

      user-select: none;
      &__control {
        display: inline-block;

        cursor: pointer;

        color: $greyish;
        &:hover {
          color: rgba(0, 0, 0, .5);
        }
        &--disabled {
          cursor: default;

          color: rgba(0, 0, 0, .1) !important;
        }
      }
      &__pager {
        line-height: 24px;

        display: inline-block;

        padding: 0 6px;

        vertical-align: middle;
      }
    }
  }

  .profile-picture {
    padding: 16px;
    &__controls {
      a {
        font-size: 13px;
        font-weight: 500;

        cursor: pointer;

        color: $dark-sky-blue;
      }
    }
    &__changer {
      position: relative;

      margin-bottom: 8px;

      border-radius: 50%;
      .avatar {
        position: relative;
        z-index: 0;
        //transition: 200ms;
      }
      a {
        font-size: 11px;
        font-weight: 700;

        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;

        display: block;

        box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin-bottom: 8px;
        padding-top: 50px;

        cursor: pointer;
        //transition: 200ms;
        text-transform: uppercase;

        color: white;
        border-radius: 50%;
        text-shadow: 0 0 4px rgba(black, .7);
        span {
          display: block;

          padding: 0 16px;

          opacity: 0;
          //transition: 200ms;
          //transform: translateY(-5px);
        }
      }

      &:hover {
        .avatar {
          opacity: .5;
        }
        a {
          background-color: rgba(0, 0, 0, .1);
          //box-shadow: inset 0 0 64px 8px rgba(0, 0, 0, .4);
          span {
            transform: translateY(0);

            opacity: 1;
          }
        }
      }
    }
  }
  .add-contact {
    &__results {
      @include no-mp();
      &__item {
        @include no-mp();
        list-style: none;
        &--not-found,
        &--searching,
        &--empty {
          text-align: center;
          padding: 16px 0;
          color: rgba(black, .3);
        }
      }

      .contact {
        .avatar {
          margin-right: 16px;
        }
        .name {
          @include no-mp();
          cursor: default;
          font-weight: 500;
          font-size: 20px;
          margin-top: 10px;
          line-height: 24px;
          span, small {
            vertical-align: middle;
          }

          small {
            @include no-select();
            padding: 2px 4px;
            background: rgba(0, 0, 0, .07);
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 10px;
            margin-left: 6px;
            color: rgba(0, 0, 0, .3);
          }
        }
        .nick {
          @include no-mp();
          font-weight: 400;
          color: rgba(black, .4);
          font-size: 15px;
          line-height: 20px;
        }
        .meta {
          margin-top: 8px;
          line-height: 24px;
          font-size: 13px;
          .title {
            color: rgba(0, 0, 0, .3);
            display: inline-block;
            width: 60px;
            margin-right: 16px;
            text-align: right;
          }
          a {
            color: $dark-sky-blue;
            text-decoration: none;
            cursor: pointer;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .controls {
          margin-top: 16px;
          text-align: right;
          display: block;
        }
      }
    }
  }
}

.contacts {
  .contacts__body {
    overflow-x: hidden;
    overflow-y: auto;

    max-height: 410px;
    padding-bottom: 6px;
  }
  &__list {
    margin: 0;
    padding: 0;

    list-style: none;

    color: $greyish-brown;
    &__item {
      padding: 7px 18px;

      .avatar {
        margin: 0 12px 0 0;
      }
      .title {
        font-size: 15px;
        line-height: 32px;

        display: inline-block;
        .emoji-outer {
          width: 20px;
          height: 20px;
        }
      }
      .controls {
        text-align: center;
        .material-icons {
          font-size: 20px;
          line-height: 32px;

          display: block;

          width: 32px;
          height: 32px;
        }
        a {
          cursor: pointer;

          color: $dark-sky-blue;
          &:hover {
            color: $body-base-color;
          }
        }
      }

      &--member {
        user-select: none;

        opacity: .4;
      }
      &--empty {
        line-height: 32px;

        color: $dove-gray;
      }
    }
  }
}

// Confirm modal
.modal-backdrop {
  background-color: $modal-backdrop-color;

  @include overlay();
  @include modal-flex();
  justify-content: center;
}

.modal {
  @include modal-main();

  &__header {
    position: relative;

    box-sizing: border-box;
    height: $modal-header-height;
    padding: 18px;

    user-select: none;

    background-color: white;
    //box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    &__title {
      font-size: 18px;
      font-weight: 400;
      line-height: 24px;

      display: inline-block;

      margin: 0;

      vertical-align: middle;

      color: $greyish-brown;
    }
  }
  &__body {
    padding: 16px 16px 8px;
  }
  &__footer {
    padding: 8px;
    .button {
      margin-left: 4px;
    }
  }

  &--confirm {
    margin-top: -50px;

    border-radius: 2px;
    background-color: #fff;
  }
  &--quick-search {
    box-sizing: border-box;
    //padding: 8px 16px 0;
    padding: 0;

    background-color: white;
    .header {
      font-size: 11px;
      line-height: 16px;

      padding: 6px 16px;

      cursor: default;
      user-select: none;

      color: rgba(0, 0, 0, .5);

      @include clearfix();
      span,
      strong {
        display: inline-block;
      }
      .pull-right {
        margin-left: 6px;
      }
    }
    .input {
      padding: 0 16px 8px;
      input {
        font-size: 26px;
        font-weight: 500;
        line-height: 30px;

        box-sizing: border-box;
        width: 100%;
        padding: 12px;

        transition: 100ms;

        color: rgba(0, 0, 0, .6);
        border: none;
        border-radius: 2px;
        //height: 64px;
        outline: none;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);

        @include placeholder(rgba(black, .15));
        &:hover {
          box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
        }
        &:focus {
          box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
          //box-shadow: 0 0 0 1px rgba($dark-sky-blue, .45);
          //box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 8px -1px rgba($dark-sky-blue, .6);
        }
      }
    }
    .results {
      overflow-x: hidden;
      overflow-y: auto;

      max-height: 352px;
      margin: 0;
      padding: 0;
      &__item {
        line-height: 32px;

        box-sizing: border-box;
        margin: 0;
        padding: 6px 16px;

        list-style: none;

        cursor: pointer;

        color: $mine-shaft;
        .avatar {
          margin-right: 12px;
          .avatar__placeholder {
            cursor: pointer;
          }
        }
        .title {
          font-size: 15px;
          line-height: 32px;

          display: inline-block;

          user-select: none;
          vertical-align: middle;

          @include text-elipsis();
        }
        .hint {
          font-size: 13px;
          line-height: 32px;

          display: none;

          text-align: right;
          vertical-align: middle;
        }
        &--active {
          font-weight: 500;

          color: white;
          background-color: $dark-sky-blue;
          text-shadow: 0 1px 1px darken($dark-sky-blue, 10);
          .hint {
            display: inline-block;

            opacity: .7;
          }
        }
        &--suggestion {
          font-weight: 400 !important;

          display: block;

          cursor: default !important;
          text-align: center;

          color: $dove-gray !important;
          background-color: white !important;
          text-shadow: none !important;
          & > span {
            display: block;
          }
          .button {
            margin-top: 10px;
          }
        }
      }
    }
    & > div {
      padding-bottom: 10px;
    }
  }
}

.crop-wrapper {
  position: relative;
  &__image-original {
    width: auto;
    min-width: 100%;
    max-width: 100%;
    height: auto;

    user-select: none;
    transform: scale(1.03);
    pointer-events: none;

    filter: blur(10px) saturate(.2);
  }
  &__overlay {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;

    overflow: hidden;

    box-sizing: content-box;

    cursor: move;

    border-radius: 50%;
    box-shadow: 0 0 0 3px white;
    img {
      position: absolute;

      display: block;
    }
  }
  &__scale {
    position: absolute;
    z-index: 1000;

    user-select: none;
    pointer-events: none;

    $scale-handler-size: 18px;
    &__handler {
      position: absolute;

      display: block;

      width: $scale-handler-size;
      height: $scale-handler-size;

      content: '';
      pointer-events: auto;

      border-radius: 50%;
      background-color: white;
      //box-shadow: inset 0 0 0 2px white;
      &:hover {
        background-color: $dark-sky-blue;
      }
      &--top {
        top: -($scale-handler-size/2) - 2;
        left: 50%;

        margin-left: -$scale-handler-size/2;

        cursor: ns-resize;
      }
      &--right {
        top: 50%;
        right: -($scale-handler-size/2) - 2;

        margin-top: -$scale-handler-size/2;

        cursor: ew-resize;
      }
      &--bottom {
        bottom: -($scale-handler-size/2) - 2;
        left: 50%;

        margin-left: -$scale-handler-size/2;

        cursor: ns-resize;
      }
      &--left {
        top: 50%;
        left: -($scale-handler-size/2) - 2;

        margin-top: -$scale-handler-size/2;

        cursor: ew-resize;
      }
    }
  }
}

.modal-wrapper {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  //opacity: 0;
  //transform: translateY(50px);
  //transition: 0s;
  //visibility: hidden;
  //pointer-events: none;

  display: none;

  background-color: white;

  @include app-sizes();
  &__close {
    position: absolute;
    top: 32px;
    right: 32px;

    width: 48px;
    height: 48px;

    cursor: pointer;
    transition: background 100ms;
    text-align: center;

    color: rgba(black, .3);
    border-radius: 50%;
    .close_icon {
      font-size: 32px;
      line-height: 48px;

      z-index: 1010;

      transition: transform 100ms;
    }
    .text {
      line-height: 20px;

      position: absolute;
      z-index: 1050;
      top: 14px;
      right: 58px;

      transition: 120ms;
      transform: translateX(30px);
      pointer-events: none;

      opacity: 0;
    }
    &:hover {
      background-color: rgba(black, .05);
      .text {
        transform: translateX(0);

        opacity: 1;
      }
      .close_icon {
        transform: rotate(90deg);

        color: rgba(black, .5);
      }
    }
  }
  &--opened {
    display: flex;

    align-items: center;
    justify-content: center;
    //transition: 150ms;
    //transform: translateY(0);
    //visibility: visible;
    //pointer-events: auto;
  }
}

.newmodal {
  position: relative;

  width: 500px;
  height: 100%;
  &__header {
    box-sizing: border-box;
    height: 150px;
    padding-top: 100px;
    h2 {
      font-size: 40px;
      line-height: 50px;

      margin: 0;
      padding: 0;

      color: $dove-gray;
    }
  }
  &__search {
    position: relative;

    margin-top: 32px;
    &__input {
      font-size: 20px;
      line-height: 32px;

      box-sizing: border-box !important;
      width: 100%;
      padding: 8px 16px;

      border: none;
      border-radius: 2px;
      outline: none;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);

      @include placeholder($greyish);
    }
  }
  &__result {
    position: absolute;
    top: 262px;
    bottom: 0;

    overflow-x: hidden;
    overflow-y: auto;

    width: 100%;
    margin: 0;
    padding: 0 0 32px;
  }
  &__contacts {
    .contacts__list {
      &__item {
        list-style: none;
        &--active {
          font-weight: 500;

          cursor: pointer;

          color: white;
          border-radius: 2px;
          background: rgba($dark-sky-blue, 1);
        }
        .title {
          line-height: 44px;
        }
      }
    }
  }
  &__groups {
    .group__list {
      &__item {
        padding: 8px 16px;

        list-style: none;

        box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .075);
        &:first-child {
          box-shadow: none;
        }
        &--active {
          cursor: pointer;

          color: white;
          border-radius: 3px;
          background: rgba($dark-sky-blue, 1);
          box-shadow: none;
          text-shadow: 0 1px 1px rgb(34, 117, 215);
          //font-weight: 500;

          .join-status {
            color: rgba(white, .7) !important;
            text-shadow: 0 1px 1px rgb(34, 117, 215);
          }
          .title {
            color: white !important;
          }
          .members {
            span {
              color: white !important;
            }
            .icon {
              color: white !important;

              fill: white !important;
            }
          }
        }
        &--active + .group__list__item {
          box-shadow: none;
        }
        .avatar {
          margin-right: 16px;
        }
        .meta {
          line-height: 44px;
          .title {
            font-weight: 500;
            line-height: 24px;

            display: inline-block;

            color: rgba(0, 0, 0, .6);
          }
          .join-status {
            font-size: 11px;
            font-weight: 500;

            margin-left: 6px;

            text-transform: uppercase;

            color: rgba(0, 0, 0, .2);
          }
          .description {
            display: none;
          }
        }

        .additional {
          .members {
            margin-top: 12px;
            span {
              font-size: 18px;
              line-height: 20px;

              display: inline-block;
              //font-weight: 500;

              min-width: 20px;
              margin-left: 4px;

              text-align: left;
              vertical-align: middle;

              color: $dark-sky-blue;
            }
            .icon {
              width: 20px;
              height: 20px;
              //margin-top: -2px;

              vertical-align: middle;

              fill: $dark-sky-blue;
            }
          }
        }
      }
    }
  }
}
